<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>日志管理页面</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/webjars/jquery/jquery.js"></script>
</head>
<body>
<blockquote class="layui-elem-quote layui-quote-nm" >
    嘻嘻，日志内容支持html标签。
</blockquote>
<fieldset class="layui-elem-field">
    <legend>
        <button class="layui-btn layui-btn-radius layui-btn-primary" id="btn" th:classappend="${insertReadonly}">
            <i class="layui-icon">&#xe608;</i> 添加
        </button>
    </legend>
    <div class="layui-field-box">
            <div class="layui-collapse" th:each="l:${logs}">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title" th:text="${l.logTitle}"></h2>
                    <div class="layui-colla-content layui-show" th:utext="${l.logContent}">
                    </div>
                </div>
            </div>
    </div>
</fieldset>
</body>
<script type="text/html" id="addlog">
    <div style="padding: 50px;">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">标题：</label>
                <div class="layui-input-block">
                    <input type="text" name="logTitle" required lay-verify="required" placeholder="请输入标题"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">内容：</label>
                <div class="layui-input-block">
                    <textarea name="logContent" required lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</script>
<script>
    layui.use(['element','form'], function() {
        var element = layui.element,
            form = layui.form;
        var insertLog ;
        $=layui.jquery;
        $(document).on('click','#btn',function(){
            //按钮被编辑
            insertLog = layer.open({
                type: 1,
                title: '添加用户',
                skin: 'layui-layer-rim', //加上边框
                area: '460px', //宽高
                content: $('#addlog').html(),
            });
        });
        form.on('submit(formDemo)', function (data) {
            console.log(JSON.stringify(data.field));
            $.ajax({
                url: 'logInfo/log',
                type: 'post',
                data: JSON.stringify(data.field),
                traditional: true,
                contentType: "application/json",
                success: function (data) {
                    if (data.code==200) {
                        layer.msg("添加成功");
                    }else{
                        layer.msg("添加失败："+data.msg);
                    }
                    //关闭弹窗,更新页面
                    layer.close(insertLog);
                    element.init();
                   //todo:页面刷新
                }
            });
            return false;
        });
    });
</script>
</html>